<template>
  <div class="container" ref="screenRef">
    <moduleTitle />
    <div class="main">
      <moduleFirst />
      <moduleSecond />
      <moduleThird />
      <moduleFour />
    </div>
  </div>
</template>

<script setup>
import moduleTitle from "./moduleTitle.vue";
import moduleFirst from "./moduleFirst.vue";
import moduleSecond from "./moduleSecond.vue";
import moduleThird from "./moduleThird.vue";
import moduleFour from "./moduleFour.vue";
import { nextTick, onMounted, onUnmounted, useTemplateRef } from "vue";

const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;

  return {
    x: ww,
    y: wh,
  };
};
const screenRef = useTemplateRef("screenRef");

const handleResize = () => {
  let scale = getScale();
  screenRef.value.style.transform = `scale(${scale.x},${scale.y})`;
};

onMounted(() => {
  nextTick(() => {
    handleResize();

    window.addEventListener("resize", handleResize);
  });
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<style scoped>
.container {
  position: fixed;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: left top;
}
</style>
